<template>
	<div class="app-container">
		<div class="wx-user-box" style="padding-top: 0;">
			<div class="wx-user-title">im列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
					<el-form-item label="状态">
						<el-select v-model="formInline.is_use" placeholder="请选择" clearable @change="search">
							<el-option label="未使用" :value="0"></el-option>
							<el-option label="已使用" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
						<!-- <el-button type="success" @click="dialogVisible = true" icon="el-icon-plus">新增</el-button> -->
					</el-form-item>
				</el-form>

				<el-table :data="list" style="width: 100%;">
					<el-table-column label="imID" prop="im_id"></el-table-column>
					<el-table-column label="im用户ID" prop="im_user_id"></el-table-column>
					<el-table-column label="用户账号" prop="user_name"></el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<el-tag size="mini" type="success" v-if="scope.row.is_use">已使用</el-tag>
							<el-tag size="mini" type="info" v-else>未使用</el-tag>
						</template>
					</el-table-column>
					<!-- <el-table-column label="关联设备ID" prop="device_id"></el-table-column>
					<el-table-column label="关联设备名称" prop="device_name"></el-table-column>
					<el-table-column label="关联小区" prop="use_xiaoqu_name"></el-table-column> -->
				</el-table>

				<div class="page-block" style="margin-top: 20px;">
					<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

		<!-- 新增 -->
		<el-dialog title="新增im账号" :visible.sync="dialogVisible" width="500px" center @close="reset('form')">
			<el-form ref="form" :model="form" :rules="rules" label-width="70px">
				<el-form-item label="用户名" prop="user_name">
					<el-input placeholder="请输入用户名" v-model="form.user_name"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input show-password placeholder="请输入密码" v-model="form.password"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset('form')">取 消</el-button>
				<el-button type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	import Api from '@/api/pages/entrance-guard/index.js';
	export default {
		name: 'im-list',
		components: {},
		data() {
			return {
				dialogVisible: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 50], // 个数选择器
				page: 1,
				size: 10,
				currentPage: 1,
				totalRow: 0,
				formInline: {
					is_use: ''
				},
				list: [],
				form: {
					user_name: '',
					password: '123456'
				},
				rules: {
					user_name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}],
				},
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			search() {
				this.page = 1;
				this.getData();
			},
			handleSizeChange(val) {
				this.size = val;
				this.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getData();
			},

			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size,
					is_use: this.formInline.is_use
				};

				Api.imQuery(data).then(res => {
					if (res.state) {
						this.list = res.data.list;
						this.totalRow = res.data.totalRow;
					} else {
						this.$message.error(res.msg);
					}
				});
			},

			reset(formName) {
				this.$refs[formName].resetFields();
				this.dialogVisible = false;
			},

			save(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let datas = {
							'accessDeviceIm.user_name': 'gexin_'+this.form.user_name,
							'accessDeviceIm.password': this.form.password
						}
						console.log(datas)
						return
						Api.imReg(datas).then(res => {
							if (res.state) {
								this.$message({
									message: res.msg,
									type: "success"
								});
								this.reset('form');
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
					}
				});
			}

		}
	};
</script>
<style scoped>
	.page-block {
		display: flex;
		justify-content: center;
	}
</style>
